<template>
  <leftTabsItem tabs-name="home">
    <div class="home">
      <van-row style="width: 100%; height: 500px; text-align: center;display: flex;align-items: end;margin-bottom: 20px;">
        <van-button type="primary">开始答题</van-button>
      </van-row>
      <van-row>
        <div style="width: 100%;">
          <van-cell-group inset>
            <!-- <van-cell title="活动说明" /> -->
            <!--奖品列表-->
            <van-list>
              <van-cell title="活动奖品" />
              <van-card
                v-for="(item, index) in buzTaskAwards"
                :key="index"
                :desc="item.awardName"
                :title="item.awardsLevel"
                thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                :num="item.awardNums"
              />

            </van-list>
            <!--活动相关信息-->
            <van-list>
              <van-cell title="活动时间" :label="`${buzTask.startTime || ''}-${buzTask.endTime || ''}`" />
              <van-cell title="主办单位" :label="buzTask.organizer" />
              <van-cell v-if="buzTask.awardsPoints > 0" title="活动规则" :label="`达到${buzTask.awardsPoints || ''}分可有抽奖机会`" />
              <van-cell title="活动说明">
                <template #label>
                  <div v-html="buzTask.memo" />
                </template>
              </van-cell>
              <van-cell title="我的联系方式" is-link />
            </van-list>
          </van-cell-group>

        </div>
      </van-row>

    </div>
  </leftTabsItem>
</template>

<script>
import leftTabsItem from '@/components/Task/leftTabsItem.vue'
import { mapState } from 'vuex'

export default {
  components: { leftTabsItem },
  computed: {
    ...mapState({
      taskDetail: state => state.task.detail,
      appSetting: state => state.task.appSetting
    }),
    bgStyle: function() {
      if (this.appSetting && this.appSetting.home && this.appSetting.home.bgStyle) {
        return this.appSetting.home.bgStyle
      } else {
        return {}
      }
    },
    buzTask: function() {
      if (this.taskDetail && this.taskDetail.buzTask) {
        return this.taskDetail.buzTask
      } else {
        return {}
      }
    },
    buzTaskAwards: function() {
      if (this.taskDetail && this.taskDetail.buzTaskAwards) {
        return this.taskDetail.buzTaskAwards
      } else {
        return []
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.home {
  padding: 10px 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .van-row .van-button {
    margin: 10px auto;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 25px;
    background: #2b3fc5;
    color: #fff;
  }
}
</style>
